<template>
    <div>
        <bs4-card>
            <div slot="header" class="row">
                <div class="col-auto mr-auto">音乐显示组件</div>
                <div class="col-auto">
                </div>
            </div>
            <Row type="flex">
                <i-col span="24">
                    <div class="demo-spin-article">
                        <av-bars
                                caps-color="#FFF"
                                :bar-color="['#f00', '#ff0', '#0f0']"
                                canv-fill-color="#000"
                                :caps-height="2"
                                audio-src="/mp3/test.mp3">
                        </av-bars>
                        <!--<Spin fix size="large" v-if="stateManager.refreshList"></Spin>-->
                    </div>
                </i-col>
            </Row>
        </bs4-card>
    </div>
</template>

<script>
  export default {
    name: 'audio',
    components: {
    },
    data: function () {
      return {
        stateManager: {
          refreshList: true,
          editDialogVisible: false,
          editModelId: 0,
          buttonLoading: false
        }
      };
    },
    // mounted: function () {
    //   this.$store.dispatch('fetchPermissionList');
    // },
    methods: {
      showEditDialog: function (id) {
        this.stateManager.editDialogVisible = true;
        this.stateManager.editModelId = id;
      }
    }
  }
</script>
